import React, { PropTypes } from 'react';
import classNames from 'classnames';

import { RiskLevelIcon } from '../common-ui-parts/index'
import { BodyItemConstant as BiC } from '../../constants/InputItemConstants';
import CommonConstants from '../../constants/CommonConstants';
import './Report.scss';
import imgLargeIntestine from './images/imgLargeIntestine.png';
import tImgLargeIntestine from './images/t_imgLargeIntestine.png';  // タブレット向け

import LayoutView, { LayoutMode } from '../layout';

class Report extends React.Component {
  constructor(props) {
    super(props);
    this.state = { current: props.defaultCategory };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ current: nextProps.defaultCategory });
  }

  _selectMaxRisk(gender, fiveHealthHabit, cerebralStroke, cardiacInfarction, gastricCancer, colorectalCancer) {
    let riskArray = [];
    riskArray.push(fiveHealthHabit);
    riskArray.push(cerebralStroke);
    riskArray.push(cardiacInfarction);
    riskArray.push(gastricCancer);
    if (gender === BiC.GENDER.MALE.value) {
      riskArray.push(colorectalCancer);
    }

    // 第１ソートキー:リスクのレベル, 第2ソートキー:リスク数値
    riskArray.sort((a, b) => {
      if (CommonConstants.RISK_LEVEL[a.riskLevel].level < CommonConstants.RISK_LEVEL[b.riskLevel].level) return -1;
      if (CommonConstants.RISK_LEVEL[a.riskLevel].level > CommonConstants.RISK_LEVEL[b.riskLevel].level) return 1;
      if (a.you < b.you) return -1;
      if (a.you > b.you) return 1;
      return 0;
    });

    const maxRisk = riskArray[riskArray.length - 1];
    if (fiveHealthHabit.riskLevel === maxRisk.riskLevel && fiveHealthHabit.you === maxRisk.you) {
      return 'fivehealthhabit';
    } else if (cerebralStroke.riskLevel === maxRisk.riskLevel && cerebralStroke.you === maxRisk.you) {
      return 'cerebralstroke';
    } else if (cardiacInfarction.riskLevel === maxRisk.riskLevel && cardiacInfarction.you === maxRisk.you) {
      return 'cardiacinfarction';
    } else if (gastricCancer.riskLevel === maxRisk.riskLevel && gastricCancer.you === maxRisk.you) {
      return 'gastriccancer';
    } else if (colorectalCancer.riskLevel === maxRisk.riskLevel && colorectalCancer.you === maxRisk.you) {
      return 'colorectalcancer';
    }
    return '';
  }

  render() {
    const { inputData, fiveHealthHabit, cerebralStroke, cardiacInfarction, gastricCancer, colorectalCancer, onCancel, onAction } = this.props;

    // 初期表示のみ最大のリスクを選択
    const current = this.state.current || this._selectMaxRisk(inputData.gender, fiveHealthHabit, cerebralStroke, cardiacInfarction, gastricCancer, colorectalCancer);

    return (
      <LayoutView
        mode={LayoutMode.REPORT}
        title="惯性病发病风险"
        handleBack={onCancel}
        handleNext={() => onAction(current)}
        labelNext="詳細を見る"
        disabledNext={current === null}
      >
        <div className="report">
          <div
            className={classNames({
              baseRisk: true,
              selectedCategory: current === 'fivehealthhabit',
              fiveHealthHabitRisk: true,
            })}
            onClick={() => this._selectCategory('fivehealthhabit')}>
            <div className="longRiskTitle">健康習慣によるがんリスク</div>
            <div className="longRiskLevel">
              <RiskLevelIcon
                level={fiveHealthHabit.riskLevel}
              />
            </div>
          </div>

          <div className="report-human">
            <div
              className={classNames({
                baseRisk: true,
                selectedCategory: current === 'cerebralstroke',
                notFiveHealthHabitRisk: true,
                cerebralStrokeRisk: true,
              })}
              onClick={() => this._selectCategory('cerebralstroke')}>
              <div className="shortRisk">
                <div className="riskTitle">脳卒中リスク</div>
                <RiskLevelIcon
                  level={cerebralStroke.riskLevel}
                />
              </div>
            </div>

            <div
              className={classNames({
                baseRisk: true,
                selectedCategory: current === 'cardiacinfarction',
                notFiveHealthHabitRisk: true,
                cardiacInfarctionRisk: true,
              })}
              onClick={() => this._selectCategory('cardiacinfarction')}>
              <div className="shortRisk">
                <div className="riskTitle">心筋梗塞リスク</div>
                <RiskLevelIcon
                  level={cardiacInfarction.riskLevel}
                />
              </div>
            </div>

            <div
              className={classNames({
                baseRisk: true,
                selectedCategory: current === 'gastriccancer',
                notFiveHealthHabitRisk: true,
                gastricCancerRisk: true,
              })}
              onClick={() => this._selectCategory('gastriccancer')}>
              <div className="shortRisk">
                <div className="riskTitle">胃がんリスク</div>
                <RiskLevelIcon
                  level={gastricCancer.riskLevel}
                />
              </div>
            </div>

            {inputData.gender === BiC.GENDER.MALE.value
              ? <div>
                <div
                  className={classNames({
                    baseRisk: true,
                    selectedCategory: current === 'colorectalcancer',
                    notFiveHealthHabitRisk: true,
                    colorectalCancerRisk: true,
                  })}
                  onClick={() => this._selectCategory('colorectalcancer')}>
                  <div className="shortRisk">
                    <div className="riskTitle">大腸がんリスク</div>
                    <RiskLevelIcon
                      level={colorectalCancer.riskLevel}
                    />
                  </div>
                </div>
                <div>
                  <img src={imgLargeIntestine} className="colorectalIllust" alt="" />
                  <img src={tImgLargeIntestine} className="tablet-colorectalIllust" alt="" height={163} />
                </div>
              </div>
              : null
            }
          </div>
        </div>
      </LayoutView>
    );
  }

  _selectCategory(category) {
    this.setState({ current: category });
  }
}
/*
Report.propTypes = {
  inputData: PropTypes.shape({
    gender: PropTypes.number,
  }),
  fiveHealthHabit: PropTypes.shape({
    you: PropTypes.number,
    min: PropTypes.number,
    max: PropTypes.number,
    riskLevel: PropTypes.string,
  }),
  cerebralStroke: PropTypes.shape({
    you: PropTypes.number,
    min: PropTypes.number,
    max: PropTypes.number,
    riskLevel: PropTypes.string,
  }),
  cardiacInfarction: PropTypes.shape({
    you: PropTypes.number,
    min: PropTypes.number,
    max: PropTypes.number,
    riskLevel: PropTypes.string,
  }),
  gastricCancer: PropTypes.shape({
    you: PropTypes.number,
    min: PropTypes.number,
    max: PropTypes.number,
    riskLevel: PropTypes.string,
  }),
  colorectalCancer: PropTypes.shape({
    you: PropTypes.number,
    min: PropTypes.number,
    max: PropTypes.number,
    riskLevel: PropTypes.string,
  }),
  onAction: PropTypes.func,
  onCancel: PropTypes.func,
  defaultCategory: React.PropTypes.string,
}*/

Report.defaultProps = {
  onAction: () => { },
  onCancel: () => { },
}

export default Report
